<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" href="css/style.css" />
		<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="js/jquery.nicescroll.min.js"></script>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
	</head>
	<body class="big_bg">
		<!-- 背景流星 -->
		<canvas id="stars"></canvas>
		
		<div class="main" id="scroll">
			<div class="m_header">
				<span id="RealTime"></span>
				<i class="titleColor"><img src="icon/logo.png" >新疆责任彩票平台数据分析</i>
				<span>截止日期 2021年05月13日</span>
			</div>
			<div class="m_charts">
				<!-- 左侧栏 -->
				<div class="m_column m_high">
					<!-- 年销量玩法占比 -->
					<div class="panel">
						<div class="panel_title">
							<i class="titleColor">年销量玩法占比</i>
						</div>
						<div id="p_pie" class="m_iframe" ></div>
						<div class="line"></div>
					</div>
					<!-- 网点情况统计 -->
					<div class="panel">
						<div class="panel_title">
							<i class="titleColor">网点情况统计</i>
						</div>
						<ul class="bigArea">
							<li>
								<h3>1,756</h3>
								<p>当月在册</p>
							</li>
							<li>
								<h3>5,600</h3>
								<p>当月在售</p>
							</li>
							<li>
								<h3>5,600</h3>
								<p>当月销量</p>
							</li>
							<li>
								<h3>5,600</h3>
								<p>当月有效</p>
							</li>
							<li>
								<h3>145</h3>
								<p>本月新增</p>
							</li>
							<li>
								<h3>78</h3>
								<p>本月撤销</p>
							</li>
						</ul>
						<div id="p_area" class="p_area" ></div>
						<div class="line"></div>
					</div>
				</div>
				<!-- 中间栏 -->
				<div class="m_center">
					<div class="panel">
						<div class="panel_title">
							<i class="titleColor">全区销量统计</i>
						</div>
						<div class="panel_data">
							<div class="data_info bg_1">
								<h2>总销量</h2>
								<ul>
									<li>
										<h3>11.59亿</h3>
										<h4>年销量</h4>
										<p>+123.46%同比</p>
									</li>
									<li>
										<h3>1.16亿</h3>
										<h4>月销量</h4>
										<p>+4.78%环比</p>
										<p>+47.53%同比</p>
									</li>
								</ul>
							</div>
							<div class="data_info bg_2">
								<h2>乐透数字型销量</h2>
								<ul>
									<li>
										<h3>11.59亿</h3>
										<h4>年销量</h4>
										<p>+123.46%同比</p>
									</li>
									<li>
										<h3>3,664.9万</h3>
										<h4>月销量</h4>
										<p>+4.78%环比</p>
										<p>+47.53%同比</p>
									</li>
								</ul>
							</div>
							<div class="data_info bg_3">
								<h2>即开型销量</h2>
								<ul>
									<li>
										<h3>11.59亿</h3>
										<h4>年销量</h4>
										<p>+123.46%同比</p>
									</li>
									<li>
										<h3>3,664.9万</h3>
										<h4>月销量</h4>
										<p>+4.78%环比</p>
										<p>+47.53%同比</p>
									</li>
								</ul>
							</div>
							<div class="data_info bg_4">
								<h2>竞彩型销量</h2>
								<ul>
									<li>
										<h3>11.59亿</h3>
										<h4>年销量</h4>
										<p>+123.46%同比</p>
									</li>
									<li>
										<h3>3,664.9万</h3>
										<h4>月销量</h4>
										<p>+4.78%环比</p>
										<p>+47.53%同比</p>
									</li>
								</ul>
							</div>
						</div>
						<div class="line"></div>
					</div>
					<div class="panel">
						<div class="panel_title">
							<i class="titleColor">年销量地市任务达成</i>
						</div>
						<ul class="column_info">
							<li>
								<img src="icon/icon_1.png" >
								<p>
									<span>目标销量</span>
									<em>2.15亿</em>
								</p>
							</li>
							<li>
								<img src="icon/icon_2.png" >
								<p>
									<span>实际销量</span>
									<em>2.15亿</em>
								</p>
							</li>
							<li>
								<img src="icon/icon_3.png" >
								<p>
									<span>完成率</span>
									<em>90.5%</em>
								</p>
							</li>
						</ul>
						<div id="p_columnarRow" class="p_columnarRow"></div>
						<!-- <iframe src="bigColumnRow.html" class="m_iframe"></iframe> -->
						<div class="line"></div>
					</div>
				</div>
				<!-- 右侧栏 -->
				<div class="m_column m_first">
					<div class="panel">
						<div class="panel_title">
							<i class="titleColor">资产类型占比</i>
						</div>
						<ul class="p_annular">
							<li>
								<i></i>
								<span>即开相关设备</span>
								<em>112256</em>
							</li>
							<li>
								<i></i>
								<span>监控相关设备</span>
								<em>11256</em>
							</li>
							<li>
								<i></i>
								<span>终端机</span>
								<em>1256</em>
							</li>
							<li>
								<i></i>
								<span>电视机</span>
								<em>256</em>
							</li>
						</ul>
						<div id="p_annular" class="m_iframe"></div>
						<div class="line"></div>
					</div>
					<div class="panel ">
						<div class="panel_title">
							<i class="titleColor">全区业务统计</i>
						</div>
						<ul class="bigArea area_flex">
							<li>
								<h3>1,756</h3>
								<p>专管员网点打卡</p>
							</li>
							<li>
								<h3>5,600</h3>
								<p>专管员网点服务</p>
							</li>
							<li>
								<h3>5,600</h3>
								<p>业主服务申报</p>
							</li>
							<li>
								<h3>5,600</h3>
								<p>即开订单总数</p>
							</li>
						</ul>
						<div class="line"></div>
					</div>
					<div class="panel">
						<div class="panel_title">
							<i class="titleColor">体彩本月销量</i>
						</div>
						<div id="p_columnar" class="m_iframe" ></div>
						<div class="line"></div>
					</div>
					
				</div>
			</div>
			<!-- 底部双栏 -->
			<div class="m_row">
				<div class="panel ">
					<div class="panel_title">
						<i class="titleColor">流程统计分析</i>
					</div>
					<ul class="bigLine big_line_color">
						<li>
							<h4>50,242</h4>
							<p>流程申请总数</p>
						</li>
						<li>
							<h4>50,242</h4>
							<p>审批中</p>
						</li>
						<li>
							<h4>58.4%</h4>
							<p>已完成</p>
						</li>
					</ul>
					<div id="p_line" class="p_columnarRow"></div>
					<div class="line"></div>
				</div>
				<div class="panel ">
					<div class="panel_title">
						<i class="titleColor">全区监控统计</i>
					</div>
					<ul class="bigLine">
						<li>
							<h4>50,242</h4>
							<p>网点监控统计</p>
						</li>
						<li>
							<h4>50,242</h4>
							<p>采集客户数</p>
						</li>
						<li>
							<h4>58.4%</h4>
							<p>网点占比</p>
						</li>
						<li>
							<h4>50,242</h4>
							<p>在线网点</p>
						</li>
						<li>
							<h4>58.4%</h4>
							<p>离线网点</p>
						</li>
						<li>
							<h4>50,242</h4>
							<p>在线占比</p>
						</li>
					</ul>
					<div id="p_columnarLine" class="p_columnarRow"></div>
					<div class="line"></div>
				</div>	
			</div>
			<!-- 悬浮菜单 -->
			<div class="menu">
			  <div class="container">
			    <div class="menu_btn">主菜单</div>
			  </div>
			  <span class="hidden item"><a href="bigChart.html" class="item_cur">数据<br>仪表盘 </a></span>
			  <span class="hidden item"><a href="bigVideo.html">监控<br>视频 </a></span>
			  <span class="hidden item"><a href="bigmMap.html">网点<br>地图 </a></span>
			</div>
		</div>
		
		<script src="js/bg.js"></script>
		<script src="js/p_pie.js"></script>
		<script src="js/p_area.js"></script>
		<script src="js/p_annular.js"></script>
		<script src="js/p_columnar.js"></script>
		<script src="js/p_columnarRow.js"></script>
		<script src="js/p_columnarLine.js"></script>
		<script src="js/p_line.js"></script>
		<script type="text/javascript">
			//滚动条
			$("#scroll").niceScroll({  
				//cursorcolor:"#262870",  
				cursoropacitymax:1,  //当滚动条是显示状态时改变透明度, 值范围 1 到 0
				touchbehavior:true,  // 激活拖拽滚动
				cursorwidth:"5px",   // 滚动条的宽度
				cursorborder:"0",  // 滚动条边框
				cursorborderradius:"5px"  ,// 滚动条圆角
				autohidemode: "hidden", // 隐藏滚动条的方式
			}); 
			// 实时时间
			function RealTime() {
				var time = new Date();
				this.oYear = time.getFullYear();
				this.oMonth = time.getMonth() + 1;
				this.oDay = time.getDate();
				this.day = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[time.getDay()];
				this.oHour = time.getHours() < 10 ? "0" + time.getHours() : time.getHours();
				this.oMin = time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes();
				this.oSen = time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds();
				var curTime = this.oYear + "年" + this.oMonth + "月" + this.oDay + "日" + " " + this.day + " " + this.oHour + ":" + this.oMin + ":" + this.oSen;
				$('#RealTime').html(curTime);
			}
			RealTime();
		 	setInterval(RealTime, 1000,);
			
			// 悬浮菜单
			$(function(){
				$('.menu_btn').on('click', function() {
				  $('.menu').toggleClass('expanded');  
				  $('span.item').toggleClass('hidden');  
				});
			})
		</script>
	</body>
</html>
